/**
 * 各种画echarts图表的方法都封装在这里
 * 注意：这里echarts没有采用按需引入的方式，只是为了方便学习
 */

import *  as echarts from "echarts";
import { tooltipFormatter } from '../tools'
const install = function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $chart: {
      get() {
        return {
          // 财务收入饼图
          shipCurveGraph: function (id, xDataArr, seriesAttr, tooltipAttr, legendAttr) {
            this.chart = echarts.init(document.getElementById(id));
            this.chart.clear();
            const optionData = {
              backgroundColor: "transparent",
              //工具框，可以选择
              legend: {
                data: legendAttr,
                textStyle: { //图例文字的样式
                  color: '#fff',
                  fontSize: 20
                }
              },
              tooltip: {
                // extraCssText:'width:500px;',
                backgroundColor: "#000",
                textStyle: {
                  color: '#fff',     // 文字的颜色
                  fontStyle: 'normal',    // 文字字体的风格（'normal'，无样式；'italic'，斜体；'oblique'，倾斜字体） 
                  fontWeight: 'normal',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
                  fontSize: '20',    // 文字字体大小
                  lineHeight: '50',    // 行高 
                },
                // showContent: true,     // 是否显示提示框浮层，默认显示
                // alwaysShowContent: true,     // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间后隐藏
                confine: true,
                trigger: 'item',
                axisPointer: {
                  type: 'cross',
                  label: {
                    color: '#FFF',     // 文字的颜色
                    backgroundColor: '#000',    // 文本标签的背景颜色
                  }

                },
                formatter: function (params) {

                  var msgModel = {};
                  for (var i = 0; i < tooltipAttr.length; i++) {
                    if (tooltipAttr[i].name == params.seriesName) {
                      msgModel = tooltipAttr[i]

                    }

                  }
                  var msg = msgModel.data[parseInt(params.dataIndex)]
                  var strRes = tooltipFormatter(msg);
                  return strRes;
                },
              },
              grid: {
                left: "3%", //图表距边框的距离
                right: "3%",
                top: "15%",
                bottom: "5%",
                containLabel: true
              },
              //x轴信息样式
              xAxis: {
                type: "category",
                boundaryGap: true,
                axisLabel: { showMaxLabel: true },
                data: xDataArr,
                //坐标轴颜色
                axisLine: {
                  lineStyle: {
                    color: "#fff"
                  }
                }
              },
              yAxis: {
                axisLine: {
                  lineStyle: {
                    color: "#fff"
                  }
                },
                type: "value"
              },
              series: seriesAttr
            };

            this.chart.setOption(optionData, true);
          }
        };
      }
    }
  });
};

export default {
  install
};
